<template>
  <van-tabbar
    v-model="actived"
    active-color="#333333"
    placeholder
    @change="tabbarChange"
  >
    <van-tabbar-item
      v-for="item in tabbarList"
      :key="item.name"
      :name="item.name"
    >
      <span>{{ item.text }}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeImg : item.img" :avc="props.active" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      tabbarList: [
        {name: 'home', text: '首页', img: require('@/assets/images/icon/home.png') , activeImg: require('@/assets/images/icon/home-active.png')},
        {name: 'category', text: '分类', img: require('@/assets/images/icon/category.png'), activeImg: require('@/assets/images/icon/category-active.png')},
        {name: 'o2oHome', text: '店铺', img: require('@/assets/images/icon/store.png'), activeImg: require('@/assets/images/icon/store-active.png')},
        {name: 'cart', text: '购物车', img: require('@/assets/images/icon/cart.png'), activeImg: require('@/assets/images/icon/cart-active.png')},
        {name: 'member', text: '我的', img: require('@/assets/images/icon/my.png'), activeImg: require('@/assets/images/icon/my-active.png')}
      ],
      routeName: '',
    };
  },
  computed: {
    actived() {
      let result = '';
      const routeName = this.$route.name;
      result = this.tabbarList.findIndex(item => item.name == routeName);
      return result;
    },
  },
  methods: {
    tabbarChange: function(active) {
      this.$router.push(this.fun.getUrl(active));
    }
  }
};
</script>